<template>
  <div ref="pieRef" style="width: 100%; height: 35vh"></div>
</template>

<script setup lang="ts">
import { ref, unref } from 'vue'
import useEchart from '@/hooks/useEchart'
import 'echarts-wordcloud'
const data = ref([
  { value: '30', name: 'VIVO' },
  { value: '29', name: 'OPPO' },
  { value: '28', name: 'HONOR' },
  { value: '27', name: '红米' },
  { value: '26', name: '小米' },
  { value: '25', name: '美图' },
  { value: '24', name: 'ONEPLUS' },
  { value: '23', name: '魅族' },
  { value: '22', name: '红手指' },
  { value: '21', name: 'SAMSUNG' },
  { value: '20', name: '金立' },
  { value: '16', name: 'BLACKBERRY' },
  { value: '15', name: '诺基亚' },
  { value: '14', name: '锤子' },
  { value: '13', name: '大疆' },
  { value: '12', name: '361' },
  { value: '11', name: '摩托罗拉' },
  { value: '10', name: '联想' },
  { value: '9', name: '玩家国度' }
])
const pieRef = ref<HTMLElement>()
const option: any = {
  title: {
    text: '',
    x: 'center'
  },
  tooltip: {},
  series: [
    {
      type: 'wordCloud',
      gridSize: 10,
      sizeRange: [14, 40],
      rotationRange: [0, 0],

      textStyle: {
        color: function () {
          return (
            'rgb(' + Math.round(Math.random() * 255) + ', ' + Math.round(Math.random() * 255) + ', ' + Math.round(Math.random() * 255) + ')'
          )
        }
      },
      left: 'center',
      top: 'center',
      right: null,
      bottom: null,
      width: '100%',
      height: '100%',
      //数据
      data: data.value
    }
  ]
}

const { myChart } = useEchart(pieRef, option)
setInterval(() => {
  data.value.sort(function () {
    return Math.random() - 0.5
  })
  unref(myChart)?.setOption(option)
}, 2000)
</script>
